<template>
	<view class="answer">
		<Top :title='title' :tik="true" @close="goback" :white='true'></Top>
		<view class="dat_box" v-show="!finshow">
			<view class="ans_head">
				<view class="ansl">
					答题进度 <view class="dan">{{answerIndex+1}}</view>/10
				</view>
				<image class="tuk" src="../../static/answer/a1.png"></image>
			</view>
			<view class="jindu">
				<view class="tiao" :style="'width:'+((answerIndex+1)/answerList.length)*100+'%'"></view>
			</view>
			<view class="dati_box">
				<view class="box_b">
					<view class="tile">单选题</view>
					<view class="timu">{{answerList[answerIndex].title}}</view>
					<view class="daank" v-if="answerList[answerIndex].option[0]"
						:class="{dui:duic=='A' && duic==answerList[answerIndex].ans ,cuo:duic!=answerList[answerIndex].ans && duic=='A'}"
						@click="change('A')">
						<view class="anlm">A.</view>
						<view class="" style="flex: 1;">
							{{answerList[answerIndex].option[0]}}
						</view>
						<view class="is_err">
							<view class="gouc" :class="{cuo:duic!=answerList[answerIndex].ans}" v-show="duic=='A'">
							</view>
						</view>
					</view>
					<view class="daank" v-if="answerList[answerIndex].option[1]"
						:class="{dui:duic=='B' && duic==answerList[answerIndex].ans ,cuo:duic!=answerList[answerIndex].ans && duic=='B'}"
						@click="change('B')">
						<view class="anlm">B.</view>
						<view class="" style="flex: 1;">
							{{answerList[answerIndex].option[1]}}
						</view>
						<view class="is_err">
							<view class="gouc" :class="{cuo:duic!=answerList[answerIndex].ans}" v-show="duic=='B'">
							</view>
						</view>
					</view>
					<view class="daank" v-if="answerList[answerIndex].option[2]"
						:class="{dui:duic=='C' && duic==answerList[answerIndex].ans ,cuo:duic!=answerList[answerIndex].ans && duic=='C'}"
						@click="change('C')">
						<view class="anlm">C.</view>
						<view class="" style="flex: 1;">
							{{answerList[answerIndex].option[2]}}
						</view>
						<view class="is_err">
							<view class="gouc" :class="{cuo:duic!=answerList[answerIndex].ans}" v-show="duic=='C'">
							</view>
						</view>
					</view>
					<view class="daank" v-if="answerList[answerIndex].option[3]"
						:class="{dui:duic=='D' && duic==answerList[answerIndex].ans ,cuo:duic!=answerList[answerIndex].ans && duic=='D'}"
						@click="change('D')">
						<view class="anlm">D.</view>
						<view class="" style="flex: 1;">
							{{answerList[answerIndex].option[3]}}
						</view>
						<view class="is_err">
							<view class="gouc" :class="{cuo:duic!=answerList[answerIndex].ans}" v-show="duic=='D'">
							</view>
						</view>
					</view>
				</view>
				<view class="lehn" v-if="duic!=answerList[answerIndex].ans&&isAnsWer">
					<view class="cuod">
						<view class="chead">
							<image class="cimg" src="../../static/answer/cuo.png"></image>
							答错了没关系-看看题目的解析吧！
						</view>
						<view class="zhenq">
							正确答案：
							<view class="ckm">{{answerList[answerIndex].ans}}</view>
						</view>
						<scroll-view class="jiexi" :scroll-y="true">解析：{{answerList[answerIndex].content}}</scroll-view>
					</view>
				</view>
				<view class="qued" @click="enterd">确定</view>
			</view>
			<view class="" style="height: 80rpx;">
			</view>
		</view>
		<view class="danwan" v-show='finshow'>
			<Finish :dui="dui" :errNum="errNum" :correctNum="correctNum" :user_list="user_list" @again="again"></Finish>
			<view class="" style="height: 80rpx;">
			</view>
		</view>
		<uni-popup ref="popup" type="center" backgroundColor="transparent">
			<view class="k_box">
				<view class="titl">您已完成申请，请等待工作人员审核，审核时间为一到两个工作日（公休日除外）</view>
				<view class="btn_box">
					<!-- <view class="btn_l" @click="tuichu">退出(3s)</view> -->
					<view class="btn_l btn_r" @click="iKnow">我知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script>
	import Top from '../../components/navBox/top.vue'
	import Finish from './Finish.vue'
	export default {
		data() {
			return {
				title: '答题闯关',
				duic: 0,
				numb: 3,
				finshow: false,
				answerList: [], //题目列表
				answerIndex: 0, //当前题目下标
				isAnsWer: false, //当前题目是否答过
				errNum: 0, //错题数
				correctNum: 0, //答对题数
				dui: false, //答题是否成功
				user_list: [], //邀请用户列表
				
			}
		},
		components: {
			Top,
			Finish
		},
		computed: {

		},
		onLoad(options) {
			
			if (options.finshow) {
				this.getInviteList();
				return;
			}
			this.getAnswerList();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			return { 
				title: `${uni.getStorageSync('userInfo').nickname}邀请您助力成为荟云街城市合伙人！`,
				path: '/pages/shopping/shopping?user_id=' + uni.getStorageSync('userInfo').id,
				imageUrl: 'https://sz.vvv5g.com/assets/img/wxImg/share.jpg'
			}
		},
		methods: {
			goback(){
				let pagelist = getCurrentPages();
				if(pagelist.length==2){
					uni.switchTab({
						url: "/pages/shopping/shopping"
					})
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			},
			iKnow(){
				this.$request({
					url: 'partners/sure_update',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userInfo').id,
					}
				}).then(res => {
					if (res.data.code == 1) {
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			//再次答题
			again() {
				this.finshow = false;
				this.answerIndex = 0;
				this.isAnsWer = false;
				this.errNum = 0;
				this.correctNum = 0;
				this.dui = false;
			},
			// 获取题目列表
			getAnswerList() {
				this.$request({
					url: 'partners/question_list',
					method: 'POST',
					data: {}
				}).then(res => {
					this.answerList = res.data.data;
				})
			},
			// 点击答案
			change(answer) {
				if (this.isAnsWer) {
					return;
				}
				this.duic = answer;
				if (this.duic == this.answerList[this.answerIndex].ans) {
					this.correctNum++;
				} else {
					this.errNum++;
				}
				this.isAnsWer = true;
			},
			// 点击确定
			enterd() {
				if (this.duic == 0) {
					uni.showToast({
						title: '请答题',
						icon: 'none'
					})
					return;
				}
				// 最后一题
				if (this.errNum + this.correctNum == this.answerList.length) {
					if (this.correctNum >= 6) {
						uni.showLoading({
							mask: true,
						})
						this.dui = true;
						this.$request({
							url: 'partners/question_sure',
							method: 'POST',
							data: {
								user_id: uni.getStorageSync('userInfo').id,
								sure_num: this.correctNum
							}
						}).then(res => {
							if (res.data.code == 1) {
								this.getInviteList();
							} else {
								uni.hideLoading();
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						})
					} else {
						this.finshow = true;
					}
				} else {
					this.isAnsWer = false;
					this.duic = 0;
					this.answerIndex++;
				}
			},
			getInviteList() {
				this.$request({
					url: 'partners/question_sure_info',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userInfo').id,
					}
				}).then(res => {
					if (res.data.code == 1) {
						uni.hideLoading();
						if (res.data.data.status == 2) {
							this.user_list = res.data.data.question.user_list;
							if(this.user_list.length>=4){
								this.$refs['popup'].open();
							}
						}
						this.dui = true;
						this.finshow = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.k_box{
		width: 468upx;
		
		background: #FFFFFF;
		border-radius: 32upx;
		.titl{
			color:#000;
			font-size:30upx;
			font-weight: 550;
			text-align: center;
			padding-top:72upx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		.btn_box{
			width:100%;
			margin-top:60upx;
			height:92upx;
			display: flex;
			justify-content: space-between;
			border-top:2upx solid #F4F4F4;
			.btn_r{
				width:100%;
				color:#333;
				border-left:2upx solid #F4F4F4;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.is_err {
		display: flex;
		flex-direction: column;
		padding-top: 22rpx;
		padding-right: 22rpx;
	}

	.answer {
		background: #EBBE87;
		width: 750upx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		overflow: scroll;
	}

	.ans_head {
		width: 686upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 12upx;

		.ansl {
			color: #844902;
			font-size: 32upx;
			margin-top: 30upx;

			.dan {
				display: inline-block;
				font-size: 40upx;
				margin-left: 10upx;
			}
		}

		.tuk {
			width: 185upx;
			height: 112upx;
		}
	}

	.jindu {
		width: 686upx;
		height: 16upx;
		background: rgba(255, 255, 255, 0.4);
		margin: 0 auto;
		position: relative;
		overflow: hidden;

		.tiao {
			position: absolute;
			left: 0;
			top: 0;
			height: 16upx;
			background: #fff;
		}
	}

	.dati_box {
		width: 686upx;
		background: #F9FAFA;
		border-radius: 28upx;
		margin: 0 auto;
		margin-top: 40upx;
		padding-top: 38upx;
		padding-bottom: 40upx;

		.box_b {
			width: 622upx;
			margin: 0 auto;

			.tile {
				width: 118upx;
				height: 60upx;
				background: #EBBE87;
				border-radius: 16upx;
				text-align: center;
				color: #fff;
				line-height: 60upx;
				font-size: 26upx
			}

			.timu {
				color: #000;
				width: 100%;
				margin: 30upx 0;
				font-size: 28upx;
				line-height: 38upx;
			}

			.daank {
				width: 100%;
				background: #F3F5F6;
				border-radius: 12upx;
				line-height: 84upx;
				color: #333;
				font-size: 26upx;
				margin-bottom: 20upx;
				display: flex;
				.anlm {
					margin-right: 20upx;
					display: inline-block;
					margin-left: 24upx;
				}

				&.dui {
					background: #E9F1EC;
					color: #3EBB43;
				}

				&.cuo {
					background: #F7E6E6;
					color: #E04A3F;
				}

				.gouc {
					width: 36upx;
					height: 36upx;
					background: url(../../static/answer/ag.png)no-repeat center;
					background-size: 100%;
					right: 22upx;
					top: 24upx;

					&.cuo {
						background: url(../../static/answer/cha.png)no-repeat center;
						background-size: 100%;
					}
				}
			}
		}

		.lehn {
			width: 100%;
			height: 422upx;
			margin: 40upx auto;

			.cuod {
				width: 622upx;
				margin: 0 auto;

				.chead {
					color: #333333;
					font-size: 26upx;
					line-height: 54upx;
					display: flex;
					font-weight: 550;

					.cimg {
						width: 54upx;
						height: 54upx;
						display: inline-block;
						margin-right: 12upx;
					}
				}

				.zhenq {
					margin-top: 26upx;
					color: #666666;
					font-size: 24upx;
					display: flex;

					.ckm {
						color: #3EBB43;
						font-size: 26upx;
						font-weight: 550;
					}
				}

				.jiexi {
					color: #666666;
					font-size: 26upx;
					line-height: 44upx;
					max-height: 300upx;
					margin: 20upx auto;
				}
			}
		}

		.qued {
			width: 622upx;
			height: 80upx;
			background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);
			border-radius: 40upx;
			margin: 0 auto;
			color: #fff;
			font-size: 28upx;
			text-align: center;
			line-height: 80upx;
		}
	}

	.danwan {
		margin: 0 auto;
		margin-top: 360upx;
	}
</style>
